<template>
<el-form ref="big_form3" :label-position=" 'right' " label-width="90px"
				 :inline="true">

	<!-- 日期范围 -->
	<el-form-item label="日期范围">
		<el-date-picker
			v-model="table3_use_data.datetime"
			type="daterange"
			range-separator="-"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			value-format="YYYY-MM-DD"
		/>
	</el-form-item>

	<!-- 处理方分组选择 -->
	<el-form-item label="处理方分组">
		<FuzzySearchHandleClassVer2 @DataUse="handle_class_auto_complete_in_record($event as any)"
														ref="handle_class_clear"
														:disable="false"
														@DataClear="handle_class1_clear"/>
	</el-form-item>

	<el-form-item label="选中分组">
		<el-select
			v-model="handle_class_selected"
			multiple
			collapse-tags
			placeholder="Select"
			style="width: 240px"
		>
			<el-option
				v-for="item in options"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			/>
		</el-select>

	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="clear_selected_handle_class()">清空选中分组</el-button>
		<el-button type="primary" @click="table3()">提交</el-button>
		<el-button type="primary" @click="download_table3()">下载表格</el-button>
	</el-form-item>

</el-form>

<el-table :data="b" id="table3" show-summary>
	<el-table-column v-for="city in a" :prop="city[0]" :label="city[1]"/>
</el-table>


<!-- 选择用到的供应商分组 -->



</template>

<script setup lang="ts">

import {ElMessage, ElTable} from "element-plus";
import {reactive, ref} from "vue";
import {InboundAndOutboundAndInventoryResponseData} from "@/api/first/ExportFile/type.ts";
import {make_excel_file} from "@/hooks/make_excel_file.ts";
import {reqInAndOutAndInventory} from "@/api/first/ExportFile";
import type {HandleClassAutoCompletion} from "@/components/first/FuzzySearchHandleClassVer2.vue";
import FuzzySearchHandleClassVer2 from "@/components/first/FuzzySearchHandleClassVer2.vue";

// 选择需要出月结的处理方

// 所有可选的选项
const options = ref<{value: number, label: string}[]>([])
// 所有最终被选择的选项
const handle_class_selected = ref<number[]>([])

const handle_class_auto_complete_in_record = (cmy: HandleClassAutoCompletion) => {
  console.log('cmy', cmy)
	options.value.push({value: cmy.handle_class_id as number, label: cmy.handle_class_name})
  console.log('options', options)
}

const handle_class_clear = ref()

// 点击删除按钮，清空所有所选项
const handle_class1_clear = () => {

}
const clear_selected_handle_class = () => {
	options.value.length = 0
	handle_class_selected.value = []
}











const a = ref([])  // 表头
const b = ref([])  // 表体

const table3_use_data = reactive<{
	datetime: [string, string] | null
}>({
	datetime: null,
})
// 下载table1

const download_table3 = () => {
	make_excel_file('出入库数量金额', 'table3')
}

// 返回table1数据
const table3 = () => {
	if (handle_class_selected.value.length === 0) {
		ElMessage.warning('请至少选择一个处理方分组')
		return
	}
	if (table3_use_data.datetime === null) {
		ElMessage.warning('请选择时间范围')
		return
	}
	let date_start: string = table3_use_data.datetime[0]
	let date_stop: string = table3_use_data.datetime[1]
	reqInAndOutAndInventory({
		start_date: date_start,
		end_date: date_stop,
		handle_class: handle_class_selected.value,
	}).then((result: InboundAndOutboundAndInventoryResponseData)=>{
		a.value = result.data.table_head
		b.value = result.data.result
		ElMessage.success(result.success?.message)
	})
}
</script>

<style scoped>

</style>